<template>
	<view class="OrderList">
		<view class="content_list">
			<view v-for="(item,index) in goodslists" @click="godetail(item.id)" class="item">
				<view class="top">
					<view class="name">
						{{item.cinemaName}}
					</view>
					<view class="time">
						{{item.status | status}}
						<!-- {{item.orderStatusName}} -->
					</view>
				</view>
				<view class="content">
					<view class="left">
						<image :src="item.filmImg" class="goods" mode=""></image>
						<view class="mid">
							<view class="fi_name">
								{{item.filmName}} {{item.ticketNum}}张
							</view>
							<view class="xxx">
								<view class="sh">
									<text>{{item.startTime | times}}</text>
								</view>
								<view class="xia">
									<text>{{item.hallName}}</text>
									<text>{{item.seatName}}</text>
								</view>
							</view>

						</view>
					</view>
				</view>
				<view class="sta">
					总价：{{item.totalTicketPrice}}元
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		filmorderlist
	} from '@/api/oil'
	export default {
		data() {
			return {
				act: 0,
				lists: {
					pageSize: 10,
					pageNum: 1,
				},
				goodslists: [],
			}
		},
		filters: {
			status(text) {
				let str
				if (text == 0) {
					str = '待支付'
				}
				if (text == 1) {
					str = '待出票'
				}
				if (text == 2) {
					str = '取消订单'
				}
				if (text == 3) {
					str = '超时取消'
				}
				if (text == 4) {
					str = '订单成功'
				}
				if (text == 5) {
					str = '已取票'
				}
				if (text == 6) {
					str = '已退票'
				}
				if (text == 12) {
					str = '出票失败，已退款'
				}
				return str
			},
			time(text) {
				let str = text.slice(0, 10)
				return str
			},
			times(value) {
				// let str = value * 1000
				let date = new Date(value);
				let y = date.getFullYear(); // 年
				let MM = date.getMonth() + 1; // 月
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate(); // 日
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours(); // 时
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes(); // 分
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds(); // 秒
				s = s < 10 ? ('0' + s) : s;
				// var timer =  y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
				var timer = y + '年' + MM + '月' + d + '日';
				return timer;
			}
		},
		onReachBottom() {
			this.lists.pageNum++;
			this.goodslist()
		},
		created() {
			this.goodslist();
		},
		methods: {
			godetail(id) {
				uni.navigateTo({
					url: './orderdetails?id=' + id
				})
			},
			jump(item) {
				if (item.orderStatusStr == '待支付') {
					uni.navigateTo({
						url: '/pages/index/payment/payment?id=' + item.id
					});
				}
			},
			goodslist() {
				filmorderlist(this.lists).then(res => {
					console.log(res)
					if (res.code == 200 && res.totalRow != 0) {
						console.log(res.data.records)
						for (let sss in res.data.records) {
							this.goodslists.push(res.data.records[sss])
						}

					} else {
						this.lists.pageNum--;
						uni.showToast({
							title: '无更多订单',
							icon: 'none',
							duration: 2000
						});
					}
				}).catch(res => {
					console.log(res)
					this.lists.pageNum--;
				})
			},
		},
		onLoad(option) {

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #e7e9ec;
		padding: 0;
		margin: 0;
		// background-color: #18BC37;
	}

	.OrderList {
		// padding: 30rpx;
		padding: 0;
		margin: 0;
	}

	.content_list {
		padding: 20rpx;
		// margin-top: 20rpx;
		// padding-top: 120rpx;

		.item {
			margin-bottom: 20rpx;
			padding: 20rpx;
			background: #FFFFFF;
			// border-radius: 36rpx;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.name {
					font-size: 32rpx;
				}

				.time {
					color: rgba(0, 0, 0, 0.8);
					font-size: 24rpx;
				}
			}

			.content {
				margin: 20rpx 0;
				padding: 20rpx 0;
				border-top: 1rpx solid rgba(0, 0, 0, 0.1);
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 120rpx;
					height: 150rpx;
					// border-radius: 10rpx;
					margin-right: 30rpx;
				}

				.left {
					display: flex;
				}

				.mid {
					width: 60%;
					height: 150rpx;
					font-size: 22rpx;
					// color: rgba(0, 0, 0, 0.5);
					display: flex;
					justify-content: space-between;
					flex-direction: column;

					.fi_name {
						font-size: 32rpx;
					}

					.xxx {
						.sh {
							font-weight: bold;
							color: rgba(0, 0, 0, 0.7);
							margin-bottom: 10rpx;
						}

						.xia {
							width: 100%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							color: rgba(0, 0, 0, 0.5);
						}
					}
				}
			}

		}
	}

	.sta {
		// text-align: right;
		font-size: 26rpx;
		color: rgba(0, 0, 0, 0.9);
		// color: red;
	}
</style>
